<template>
	<view class="nes">
		<view class="mons" v-if='data != null'>
			<view class="top">
				<!-- 小程序头部兼容 -->
				<!-- #ifdef MP -->
				<image class="bac" src="../../static/img/3/3-58.png"></image>
				<!-- #endif -->
				<view class="l">
					<image src="../../static/img/3/3-55.png" mode="widthFix"></image>
					<text>{{data.cNextStatusName}}</text>
				</view>
				<view class="r" v-if='wul != null'>
					{{wul.corp_name}}
				</view>
			</view>
			<view class="con">
				<navigator class="arrs lest" v-if='data.cNextStatus == "TAKEDELIVERY"' :url="'/pages/user/logistics?id='+data.cOrderNo">
					<image src="../../static/img/3/3-56.png" mode="widthFix"></image>
					<view class="text">
						{{wul.corp_name}}
						<view>
							{{wul.nu}}
						</view>
					</view>
					<image class="rights" src="../../static/img/3/3-36.png" mode="widthFix"></image>
				</navigator>
				<view class="arrs">
					<image src="../../static/img/3/3-57.png" mode="widthFix"></image>
					<view class="text">
						{{data.cReceiver}} {{data.cReceiveMobile}}
						<view>
							{{data.cReceiveAddress}}
						</view>
					</view>
				</view>
				<view class="oder">
					<view class="li">
						<view v-for="l in data.oOrderDetails" class="con">
							<view class="img">
								<image :src="l.DefaultImage" mode="widthFix"></image>
							</view>
							<view class="text">
								{{l.cProductName}}

							</view>
							<view class="numb">
								￥{{l.fSalePrice}}
								<view>
									x{{l.iQuantity}}
								</view>
							</view>


						</view>
						<view class="butbox">
							<text class="status">{{returnDetail.cSaleReturnStatusName}}</text>
							<view v-if='(data.cNextStatus == "ENDORDER"||data.cNextStatus == "DELIVERGOODS"||data.cNextStatus == "TAKEDELIVERY")&&!returnDetail.cSaleReturnStatus'
							 :url="'/pages/user/odersh?cOrderNo='+data.cOrderNo" @click="toPage" class="butb">
								申请退款
							</view>
							
						</view>
						<view class="li-up">
							商品总价
							<view class="ri">
								￥{{data.fTotalMoney}}
							</view>
						</view>
						<view class="li-up">
							运费
							<view class="ri">
								￥{{data.iPostage}}
							</view>
						</view>
						<view class="li-up">
							订单总价
							<view class="ri">
								￥{{data.fPayMoney}}
							</view>
						</view>

					</view>
					<view class="money">
						<image src="../../static/img/3/topx.png" mode="widthFix"></image>
						<view class="money-l">
							实付款
							<text>￥{{data.fPayMoney}}</text>
						</view>
					</view>
				</view>
				<view class="oderMsg">
					<view class="h3">
						订单信息
					</view>
					
					<view class="p">
						<text>订单编号</text>
						<view class="txt">
							{{data.cOrderNo}}
						</view>
					</view>
					<view class="p">
						<text>订单备注</text>
						<view class="txt">
							{{data.cClientMemo}}
						</view>
					</view>
					<!-- 	<view class="p" v-if='data.eInvoiceEnable'>
							<text>发票类型</text>
							<view class="txt">
								电子纸质发票
							</view>
						</view>
						<view class="p" v-if='data.eInvoiceEnable'>
							<text>发票抬头</text>
							<view class="txt">					
								Windir
							</view>
						</view>
						<view class="p" v-if='data.eInvoiceEnable'>
							<text>发票内容</text>
							<view class="txt">
								日用品
							</view>
						</view> -->
					<view class="p">
						<text>创建时间</text>
						<view class="txt">
							{{data.dOrderDate}}
						</view>
					</view>

					<view class="p">
						<text>付款时间</text>
						<view class="txt">
							{{data.dPayDate}}
						</view>
					</view>
					<!-- <view class="p">
							<text>成交时间</text>
							<view class="txt">
								2019-09-11 09:10:24
							</view>
						</view> -->
				</view>
			</view>

		</view>

		<view class="footer">
			<!-- <text>应付金额：¥180.00</text> -->
			<view class="buts">

				<view class="view buta" @click="ok(data.cOrderNo)" v-if='data.cNextStatus == "TAKEDELIVERY"'>
					确认收货
				</view>
				<navigator :url="'/pages/user/logistics?id='+data.cOrderNo" v-if='data.cNextStatus == "TAKEDELIVERY"' class="view butb">
					查看物流
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				data: null,
				wul: null,
				returnDetail:{}
			}
		},
		onLoad(options) {
			let that = this;

			that.$Request.post(
				that.$api.httpApi.user.oderPay + '&token=' + that.$SysCache.get('token'), {
					cOrderNo: options.cOrderNo
				}
			).then(res => {
				if (res.code == 200) {
					that.data = res.data;
					if (res.data.cNextStatus == "TAKEDELIVERY") {
						that.$Request.post(
							that.$api.httpApi.user.wuliu + '&token=' + that.$SysCache.get('token'), {
								cOrderNo: res.data.cOrderNo
							}
						).then(ress => {
							// console.log(res.data)
							if (ress.code == 200) {
								that.wul = ress.data;
							}
						});

						



					}
					that.$Request.post(
						that.$api.httpApi.order.getReturnDetail + '&token=' + that.$SysCache.get('token'), {
							iDetailId: res.data.oOrderDetails[0].id
						}
					).then(resd => {
						if (resd.code == 200) {
							console.log(resd.data)
							that.returnDetail = resd.data
						}
					});

				}
			});


		},
		methods: {
			ok(id) {
				let that = this;
				that.$Request.post(
					that.$api.httpApi.user.ok + '&token=' + that.$SysCache.get('token'), {
						'cOrderNo': id
					}
				).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message
						});
						that.$Request.post(
							that.$api.httpApi.user.oder + '&token=' + that.$SysCache.get('token'), {
								'onLineOffLine': 0,
								'orderType': 2,
								status: null
							}
						).then(res => {
							if (res.code == 200) {
								that.$api.prePage().data = res.data.orders;
							}
						});
					}
				});
			},
			toPage(){
				if(this.returnDetail.cSaleReturnStatus){
					uni.navigateTo({
						url:"/pages/user/returnDetail?cOrderNo="+this.data.cOrderNo
					})
				}else{
					uni.navigateTo({
						url:"/pages/user/odersh?cOrderNo="+this.data.cOrderNo
					})
				}
				
			}
		}

	}
</script>

<style scoped lang="less">
	.nes {
		height: 100%;

		overflow: hidden;
	}

	.footer {
		height: 105rpx;
		background: rgba(0, 0, 0, 1);
		line-height: 105rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		padding: 0 25rpx 0 25rpx;
	}

	.footer text {
		display: inline-block;
		/* width: 50%; */
		vertical-align: middle;
	}

	.footer .buts {
		width: 100%;
		display: inline-block;
		text-align: right;
		float: right;
	}

	.footer .buts .view {
		display: inline-block;
		vertical-align: middle;
		margin-right: 25rpx;
		width: 156rpx;
		height: 57rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 29rpx;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 254, 254, 1);
		line-height: 57rpx;
		text-align: center;
	}

	.footer .buts .view:nth-child(2n) {
		margin-right: 0;
	}

	.footer .buts .butb {
		background: rgba(0, 0, 0, 0);
		border: 1px solid rgba(255, 255, 255, 1);
	}

	.oderMsg {
		margin-top: 4rpx;
		background: #fff;
		padding: 25rpx;
	}

	.oderMsg .h3 {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin-bottom: 25rpx;
	}

	.oderMsg .p {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 48rpx;
	}

	.oderMsg .p text {
		display: inline-block;
		width: 150rpx;
	}

	.oderMsg .p .txt {
		display: inline-block;

	}

	.money-l {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 25rpx 0 25rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.money-l text {
		float: right;
		color: rgba(240, 64, 111, 1);
	}

	.money image {
		display: block;
		width: 100%;
	}

	.butbox {
		text-align: right;
		margin-bottom: 16rpx;
		.status{
			font-size:26upx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(240,64,111,1);
			margin-right: 20upx;
		}
	}

	.butbox view {
		display: inline-block;
		width: 123rpx;
		height: 50rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
		vertical-align: middle;
		margin-left: 20rpx;
	}

	.butbox navigator {
		display: inline-block;
		width: 123rpx;
		height: 50rpx;
		font-size: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
		vertical-align: middle;
		margin-left: 20rpx;
	}

	.butbox .buta {
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(240, 64, 111, 1);
		color: rgba(240, 64, 111, 1);

	}

	.butbox .butb {
		background: rgba(32, 29, 29, 1);
		border-radius: 25px;
		color: rgba(255, 255, 255, 1);
	}

	.both {
		display: block;
		clear: both;
	}



	.numb {
		width: 90rpx;
		text-align: right;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		display: inline-block;
		vertical-align: middle;
		margin-left: 68rpx;
	}

	.numb view {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 12rpx;
	}

	.con .text {
		display: inline-block;
		vertical-align: middle;
		width: 400rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 30rpx;
		margin-left: 20rpx;
	}

	.con .text .bu {
		display: block;
		width: 162rpx;
		height: 31rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 5rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 30rpx;
		text-align: center;
		margin-top: 15rpx;
	}

	.con .img {
		display: inline-block;
		vertical-align: middle;
		width: 130rpx;
		height: 130rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(228, 228, 228, 1);
		border-radius: 5rpx;
		text-align: center;
		line-height: 130rpx;
	}

	.con .img image {
		display: inline-block;
		width: 70%;
		margin: auto;
		vertical-align: middle;
	}

	.li-up {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin-bottom: 10rpx;
	}

	.payoder {}

	.li-up .r {
		float: right;
		color: rgba(240, 64, 111, 1);
	}

	.li-up .ri {
		float: right;
	}

	.oder .li {
		background: #fff;
		/* margin-top: 10rpx; */
		padding: 20rpx;
	}

	.oder {
		background: #fff;
		margin-top: 4rpx;
	}

	.arrs {
		background: #fff;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 39rpx;
		padding: 18rpx 25rpx 18rpx 25rpx;
	}

	.arrs image {
		display: inline-block;
		vertical-align: top;
		width: 31rpx;
	}

	.arrs .text {
		display: inline-block;
		width: calc(100% - 31rpx - 11rpx);
		margin-left: 11rpx;
	}

	.top .l {
		flex: 1;
		font-size: 45rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 81rpx;
		padding-left: 25rpx;
		position: relative;
		z-index: 10;
	}

	.top .l image {
		display: inline-block;
		vertical-align: middle;
		width: 115rpx;
	}

	.top .l text {
		display: inline-block;
		vertical-align: middle;
		font-size: 45rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-left: 25rpx;
	}

	.top .r {
		flex: 1;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 98rpx;
		text-align: right;
		padding-right: 25rpx;
	}

	uni-page-body {
		height: 100%;
	}

	.mons {
		height: calc(100% - 105rpx);
		overflow: auto;
		background: #EEEEEE;
	}

	.top {
		background: url(../../static/img/3/3-58.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 82rpx;
		padding-bottom: 82rpx;
		position: relative;
		background-color: #fff;
		display: flex;
	}

	.top .bac {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
	}

	.lest {
		margin-bottom: 4rpx;
		padding-bottom: 37rpx;
		padding-top: 37rpx;
	}

	.lest image {
		width: 32rpx;
		vertical-align: top;
	}

	.lest .text {
		width: calc(100% - 42rpx - 30rpx);

	}

	.lest .rights {
		display: inline-block;
		width: 20rpx;
		margin-left: 10rpx;
		vertical-align: middle;
	}
</style>
